import React, { Component } from 'react'
import ManufacturerInfo from '../../types/ManufacturerInfo'
import { RouteComponentProps } from 'react-router-dom'
import { getAreaName, queryManufacturer } from '../../requests/Manufacturer'
import { getRes } from '../../configFile'
import { message, Descriptions, Card } from 'antd'
import RecommendedReq from '../../components/RecommendedReq'
import ArticleType from '../../types/ArticleType'

interface IProps extends RouteComponentProps<{ manuID: string }> { }
interface IState {
    manufacturer: ManufacturerInfo | undefined;
}
export default class ManufacturerDisplay extends Component<IProps, IState> {
    getManu = async (manuID: number) => {
        try {
            const res = getRes(await queryManufacturer(manuID))
            //返回失败
            if (res.isSuccessful === false) {
                message.error("厂商获取失败，" + res.message);
                return;
            }
            //返回正确
            this.setState({ manufacturer: res.data });
        } catch (err) {
            message.error(err.toString());
        }
    }

    constructor(props: IProps) {
        super(props);
        this.state = {
            manufacturer: undefined
        }
    }
    async componentDidMount() {
        await this.getManu(Number.parseInt(this.props.match.params.manuID));
        if (!!this.state.manufacturer) {
            const areaCode = this.state.manufacturer.manufacturerAddress.split(',')[0];
            try {
                const areaRes = getRes(await getAreaName(areaCode));
                if (areaRes.isSuccessful) {
                    const addr = areaRes.data + ' '
                        +
                        this.state.manufacturer.manufacturerAddress.split(',').filter((item, index) => index !== 0).join('');
                    this.state.manufacturer.manufacturerAddress = addr;
                    this.setState({ ...this.state });
                }
            } catch (err) {
                message.error(err.toStrng())
            }
        }
    }
    render() {
        return (
            <div className="frameCardWrapper">
                <div className="flexRow">
                    <div className="leftFrameBox">
                        <div className="manuDisplayPageTitleBox">
                            <div className="manuDisplayPageTitle">
                                {this.state.manufacturer?.manufacturerName}
                            </div>
                            <div className="specificManuInTitleDisplay">
                                <div className="manuID">
                                    厂商ID：{this.state.manufacturer?.manufacturerID}
                                </div>
                            </div>
                        </div>
                        <div className="manuInfoDisplayBox">
                            <Card>
                                <Descriptions title="厂商信息" column={1}>
                                    <Descriptions.Item label="联系电话">{this.state.manufacturer?.manufacturerTelephone}</Descriptions.Item>
                                    <Descriptions.Item label="厂商地址">{this.state.manufacturer?.manufacturerAddress}</Descriptions.Item>
                                    <Descriptions.Item label="厂商简介">{this.state.manufacturer?.manufacturerIntroduction}</Descriptions.Item>
                                </Descriptions>
                            </Card>
                        </div>
                    </div>
                    <div className="rightFrameBox">
                        <RecommendedReq title={'测评文章'} recommendType={ArticleType.KNOWLEDGE} />
                    </div>
                </div>
            </div>
        )
    }
}
